<script setup>
import {reactive, toRefs, ref, defineProps, defineEmits, defineExpose} from 'vue'
import {ElMessage} from "element-plus"
import { GetInfo, Insert, Update } from "@/api/task.js";
import { AdminList } from '@/api/admin.js'
import { UserList } from '@/api/user.js'
import { ProjectList } from '@/api/project.js'

const props = defineProps({
  showDialog: Boolean
})
const {showDialog} = toRefs(props)

const emits = defineEmits(['closeHandle'])
const closeDialog = (hasChange) => {
  emits('closeHandle', hasChange)
}

const titleShow = ref('')
const users = ref([])
const admins = ref([])
const projects = ref([])

const editForm = ref({})
const init = (title, id) => {
  UserList().then((res) => {
    users.value = res.data;
  })
  AdminList().then((res) => {
    admins.value = res.data;
  })
  ProjectList().then((res) => {
    projects.value = res.data;
  })
  titleShow.value = title;
  if (id) {
    GetInfo(id).then(res => {
      editForm.value = res.data
    })
  } else {
    editForm.value = {
      title: '',
      description: '',
      projectId: null,
      creatorId: null,
      assigneeId: null,
      status: 1,
      deadline: '',
      priority: 1
    }
  }
}
const resetForm = () => {
  editForm.value = { };
}
defineExpose({init, resetForm})

const ruleForm = ref()
const submitForm = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      editForm.value.deadline = formatDate(editForm.value.deadline)
      if (editForm.value.id) {
        Update(editForm.value).then((res) => {
          ElMessage({message: '更新成功', type: 'success'})
          closeDialog(true)
        })
      } else {
        Insert(editForm.value).then((res) => {
          ElMessage({message: '新增成功', type: 'success'})
          closeDialog(true)
        })
      }
    }
  })
}

const rules = reactive({
  title: [
    {required: true, message: '请输入任务标题', trigger: 'blur'}
  ],
  projectId: [
    {required: true, message: '请选择项目', trigger: 'change'}
  ],
  creatorId: [
    {required: true, message: '请选择创建者', trigger: 'change'}
  ],
  status: [
    {required: true, message: '请选择任务状态', trigger: 'change'}
  ],
  deadline: [
    {required: true, message: '请选择截止日期', trigger: 'change'}
  ],
  priority: [
    {required: true, message: '请选择优先级', trigger: 'change'}
  ]
})

// 日期格式化函数
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>

<template>
  <!--任务编辑对话框-->
  <el-drawer
      :title="titleShow"
      width="600px"
      v-model="showDialog"
      :before-close="closeDialog"
  >
    <el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-editForm">
      <el-form-item label="任务标题" prop="title" label-width="100px">
        <el-input v-model="editForm.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务描述" prop="description" label-width="100px">
        <el-input v-model="editForm.description" autocomplete="off" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="项目" prop="projectId" label-width="100px">
        <el-select v-model="editForm.projectId" placeholder="请选择项目">
          <el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建者" prop="creatorId" label-width="100px">
        <el-select v-model="editForm.creatorId" placeholder="请选择创建者">
          <el-option v-for="admin in admins" :key="admin.id" :label="admin.name" :value="admin.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="被分配者" prop="assigneeId" label-width="100px">
        <el-select v-model="editForm.assigneeId" placeholder="请选择被分配者">
          <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务状态" prop="status" label-width="100px">
        <el-select v-model="editForm.status">
          <el-option label="待办" :value="1"></el-option>
          <el-option label="进行中" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="截止日期" prop="deadline" label-width="100px">
        <el-date-picker v-model="editForm.deadline" type="datetime" placeholder="选择日期" format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="优先级" prop="priority" label-width="100px">
        <el-select v-model="editForm.priority">
          <el-option label="低" :value="1"></el-option>
          <el-option label="中" :value="2"></el-option>
          <el-option label="高" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即{{titleShow}}</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>